import React from "react";
import { Switch, Route, Redirect, NavLink } from "react-router-dom";
import Cate from "../Cate/Cate";
import Index from "../Index/Index";
import Shop from "../Shop/Shop";
import Mine from "../Mine/Mine";
//静态资源
import "./home.less"
import home_select from "../../assets/img/home_select.jpeg";
import home_no from "../../assets/img/home_no.jpeg";
import cate_select from "../../assets/img/cate_select.jpeg";
import cate_no from "../../assets/img/cate_no.jpeg";
import shop_select from "../../assets/img/shop_select.jpeg";
import shop_no from "../../assets/img/shop_no.jpeg";
import mine_select from "../../assets/img/mine_select.jpeg";
import mine_no from "../../assets/img/mine_no.jpeg";
export default function Home(props) {
  let {
    location: { pathname },
  } = props;
  return (
    <div className="home">
      <Switch>
        <Route path="/index/home" component={Index}></Route>
        <Route path="/index/cate" component={Cate}></Route>
        <Route path="/index/shop" component={Shop}></Route>
        <Route path="/index/mine" component={Mine}></Route>
        <Redirect to="/index/home"></Redirect>
      </Switch>
      <footer className="footer">
        <NavLink activeClassName="select" to="/index/home">
          <img src={pathname == "/index/home" ? home_select : home_no} alt="" />
          <span>首页</span>
        </NavLink>
        <NavLink activeClassName="select" to="/index/cate">
          <img src={pathname == "/index/cate" ? cate_select : cate_no} alt="" />
          <span>分类</span>
        </NavLink>
        <NavLink activeClassName="select" to="/index/shop">
          <img src={pathname == "/index/shop" ? shop_select : shop_no} alt="" />
          <span>购物车</span>
        </NavLink>
        <NavLink activeClassName="select" to="/index/mine">
          <img src={pathname == "/index/mine" ? mine_select : mine_no} alt="" />
          <span>我的</span>
        </NavLink>
      </footer>
    </div>
  );
}
